<template>
  <view class="order-submission">
    <view class="allAddress">
      <view class="nav acea-row">
        <view style="width: 50%;" class="item font-color-red" :class="shippingType === 1 ? 'on' : 'on2'" @click="addressType(1)"></view>
        <view style="width: 50%;float: right;" class="item font-color-red" :class="shippingType === 2 ? 'on' : 'on2'" @click="addressType(2)"></view>
      </view>
    </view>
    <navigator url="/pages/address/list?source=1" v-if="shippingType === 1"  class="address">
      <view class="address-head">订单配送至</view>
      <view v-if="addressData.phone" class="address-main">
        <image src="../../static/order/address.png" class="address-left"></image>
        <view class="address-text">{{addressData.province}} {{addressData.city}} {{addressData.county}}
          {{addressData.address}}</view>
        <image src="../../static/order/right.png" class="address-right"></image>
      </view>
      <view class="padding-tb-sm" v-else>
        请选择配送地址
      </view>
    </navigator>
    <navigator v-if="shippingType === 2"  class="address">
      <view class="address-head">订单配送至</view>
      <view v-if="storageData.address" class="address-main">
        <image src="../../static/order/address.png" class="address-left"></image>
        <view class="address-text">{{storageData.address}} {{storageData.phone}}</view>
        <view class="address-text" style="float: right;font-size: 28rpx;padding-top: 12rpx;">距离您 {{storageData.distance>1000 ? (storageData.distance/1000).toFixed(2)+'km' : storageData.distance+'m'}}</view>
      </view>
      <!-- <view class="address-distance">距离您732米</view> -->
    </navigator>
    <image class="a-bg" src=""></image>
    <view class="goods">
      <view  class="goods-head flex">
        <view class="goods-head-text">{{shippingType === 2?'取货时间':'送达时间'}}</view>
        <view @click="selectTime" style="text-align: right;" class="goods-head-time text-cut padding-right-sm">{{shippingType === 2?orderReqeust.predictTime.replaceAll('送达','取货'):orderReqeust.predictTime}}</view>
        <image src="../../static/order/time-right.png" class="goods-head-right"></image>
      </view>
      <view class="goods-one" v-if="orderReqeust.productList.length ==1">
        <image class="goods-img"
               :src="(orderReqeust.productList[0].productAttrImg?JSON.parse(orderReqeust.productList[0].productAttrImg)[0].url:JSON.parse(orderReqeust.productList[0].productImg)[0].url)"></image>
        <view class="goods-text">
          <view class="goods-name">{{orderReqeust.productList[0].productAttrName}}</view>
          <view class="goods-tag">
            <view class="goods-price">￥{{orderReqeust.productList[0].price}}</view>
            <view class="goods-yprice">￥{{orderReqeust.productList[0].otPrice}}</view>
            <view class="goods-number">×{{orderReqeust.productList[0].cartNum}}</view>
          </view>
        </view>
      </view>
      <view class="goods-one" v-else>
        <view class="scroll_box">
          <scroll-view  scroll-x="true">
            <block  v-for="(item, index) in orderReqeust.productList" :key="index">
              <image class="goods-more-img" :src="(item.productAttrImg?JSON.parse(item.productAttrImg)[0].url:JSON.parse(item.productImg)[0].url)"></image>
            </block>
          </scroll-view>
        </view>
        <view class="goods-more-number">共{{orderReqeust.totalNumber}}件</view>
        <image src="../../static/order/time-right.png" class="goods-more-right"></image>
      </view>
    </view>
    <view class="distribution">
      <view class="distribution-list distribution-list-bottom" v-if="shippingType === 1">
        <view class="distribution-text">配送费</view>
        <view class="distribution-price">{{orderReqeust.freightPrice }}元</view>
      </view>
      <view class="distribution-list distribution-list-bottom" v-if="shippingType === 2">
        <view class="distribution-text">联系人</view>
        <view class="distribution-price"><input type="text" v-model="orderReqeust.name" placeholder="请输入您的联系姓名"></view>
      </view>
      <view class="distribution-list distribution-list-bottom" v-if="shippingType === 2">
        <view class="distribution-text">联系电话</view>
        <view class="distribution-price"><input type="text" v-model="orderReqeust.phone" placeholder="请输入您的联系电话"></view>
      </view>
      <view class="distribution-list distribution-list-bottom" @click="toggleMask('show')">
        <view class="distribution-text">优惠券</view>
        <view class="distribution-price"  style="color: red;">{{orderReqeust.coupon?orderReqeust.coupon.couponTitle : '选择优惠券'}}</view>
      </view>

      <view class="distribution-list">
        <view class="distribution-text">备注</view>
        <view class="distribution-price"><input type="text" v-model="orderReqeust.mono" placeholder="请输入备注信息"></view>
      </view>
    </view>
    <view class="distribution">
      <view class="distribution-list distribution-list-bottom">
        <view class="distribution-text pay-text">支付方式</view>
      </view>
      <view class="distribution-list distribution-list-bottom" @click="changePayType('WX')">
        <view class="distribution-text">微信</view>
        <view class="distribution-price">
          <image :src="payType === 'WX'?'../../static/order/xuanzhong.png':'../../static/order/xuanzhong-no.png'"></image>
        </view>
      </view>
       <view class="distribution-list" @click="changePayType('BALANCE')">
        <view class="distribution-text">余额</view>
        <view class="distribution-price">
          <image :src="payType === 'BALANCE'?'../../static/order/xuanzhong.png':'../../static/order/xuanzhong-no.png'"></image>
        </view>
      </view>
    </view>
    <!-- 优惠券面板 -->
    <view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
      <view class="mask-content" @click.stop.prevent="stopPrevent">
        <!-- 优惠券页面，仿mt -->
        <view @click="selectCoupon(item)" v-if="(!item.categoryId && orderReqeust.totalPrice >= item.useMinPrice) || (item.categoryId && skuCategoryPriceMap[item.categoryId] && skuCategoryPriceMap[item.categoryId] > item.useMinPrice)" class="coupon-item" v-for="(item,index) in couponList" :key="index">
          <view class="con">
            <view class="left">
              <text class="title">{{item.couponTitle}}</text>
              <text class="time">有效期至{{item.endTime | dateFormat}}</text>
            </view>
            <view class="right">
              <text class="price">{{item.couponPrice }}</text>
              <text>满{{item.useMinPrice }}可用</text>
            </view>

            <view class="circle l"></view>
            <view class="circle r"></view>
          </view>
          <text class="tips">{{item.categoryTitle?'限' + item.categoryTitle + '可用': '全品类可用'}}</text>
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <view class="footer">
      <view class="priceClass">
        <view class="price-content"><text>总计</text><text class="price-content-money">￥{{(orderReqeust.totalPrice - (orderReqeust.coupon?orderReqeust.coupon.couponPrice:0) + parseInt(orderReqeust.freightPrice))}}</text></view>
        <view class="price-preferential"><text>已优惠：</text><text>{{(orderReqeust.totalotPrice - orderReqeust.totalPrice)}}元</text></view>
      </view>
      <view class="submit" @click="submit">
        去付款
      </view>
    </view>

    <uni-popup ref="popup" type="bottom" :animation="true" style="z-index: 9999;">
      <view class="flex align-center justify-between" style="padding: 34rpx 30rpx;background-color: #F2F2F2;">
        <view style="font-size: 32rpx;line-height: 38rpx;color: #1B1C33;">选择送达时间</view>
        <view @click="checkTime" style="font-size: 32rpx;line-height: 38rpx;color: #2AAB34;">确定</view>
      </view>
      <view class="flex justify-between">
        <view style="width: 347rpx;height: 500rpx;background-color: #F2F2F2;">
          <view v-for="(date,index) in dayList" :key="index" @click="chooseDay(index)"
                :class="[index == dayIndex?'bg-white':'']"
                style="padding: 25rpx 84rpx 25rpx 59rpx;font-size: 32rpx;line-height: 38rpx;color: #1B1C33;">
            {{date}}
          </view>
        </view>
        <view class="bg-white" style="width: 404rpx;height: 500rpx;padding-left: 52rpx;position: relative;">
          <scroll-view scroll-y="true" style="width: 404rpx;height: 500rpx;">
            <view v-for="(time,index) in timeList[dayIndex]" :key="index" @click="chooseTime(index)"
                  :class="[index == timeIndex?'text-green':'']"
                  class="solid-bottom" style="padding: 25rpx 0;font-size: 32rpx;line-height: 38rpx;">
              <text v-if="index == 0 && dayIndex == 0 && dayList.length >= 3">{{time}}</text>
              <text v-else>{{time[0]+'-'+time[1]}}</text>
            </view>
          </scroll-view>
          <view style="position: absolute;bottom: 0;width: 404rpx;height: 53rpx;background-color: rgba(255,255,255,0.8);">
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue"
export default {
  data() {
    return {
      payType: 'WX',
      shippingType: 1,
      orderReqeust: {
        productList: [],
        totalotPrice: 0,
        totalPrice: 0, //商品折扣（仅算VIP和限时打折）后总价
        totalNumber:0,//商品件数
        coupon: undefined,
        couponId: 0,
        mono: '',
        takeWay: '',
        freightPrice: 0,
        addressId: undefined,
        predictTime:'',
        phone:'',
        name:''
      },
      skuCategoryPriceMap: {},
      maskState: 0, //优惠券面板显示状态
      couponList: [],
      isVip: false,
      storageData: {
        address: ''
      },
      addressData: {
        consignee: '',
        phone: '',
        province: '',
        city: '',
        county: '',
        address: '',
        defaultAddress: false,
      },
      submiting: false,
      dayList:[],//配送时间
      dayIndex:0,//选中配送时间
      timeList:[],
      timeIndex:0,
      now:0,//当前小时
      nowTime:0,//当前分钟
      dateObj:{
        year: 0,
        today:0,
        tomorrow:1,
        afterTomo:2
      }
    }
  },
  components: {uniPopup},
  onShow() {
    this.isVip = this.$api.isVip()
  },
  onLoad(option) {
    //商品数据
    this.isVip = this.$api.isVip()
    const that = this
    if (option.takeway) {
      that.orderReqeust.takeWay = option.takeway
    }
    that.orderReqeust.productList = that.$api.globalData.productList;
    let totalotPrice = 0
    let totalPrice = 0
    let totalNumber = 0
    let skuCategoryPriceMap = {}
    that.orderReqeust.productList.forEach(item => {
      totalotPrice += item.otPrice * item.cartNum
      totalNumber += item.cartNum
      totalPrice += that.isVip ? (item.vipPrice * item.num) : (item.price * item.cartNum)
      //构建category价格Map
      item.cateIdList.forEach(catItem => {
        if (skuCategoryPriceMap[catItem]) {
          skuCategoryPriceMap[catItem] += that.isVip ? (item.vipPrice * item.cartNum) : (item.price * item.cartNum)
        } else {
          skuCategoryPriceMap[catItem] = that.isVip ? (item.vipPrice) : (item.price)
        }
      })
    })
    that.skuCategoryPriceMap = skuCategoryPriceMap
    that.orderReqeust.totalotPrice = totalotPrice
    that.orderReqeust.totalNumber = totalNumber
    that.orderReqeust.totalPrice = totalPrice
    that.$api.request('get', 'coupon/app/getUserCoupons').then(res => {
      that.couponList = res.data
    })

    let addresses = uni.getStorageSync('addresses');
    that.$api.request('get', 'storage/position/getStorage',{storageId:that.$store.state.storageId}).then(res => {
      that.storageData = res.data
      if(addresses){
        that.storageData.distance = addresses.distance
      }
    })
    //设置距离

    that.$api.request('get', 'address/app/getDefAddress').then(res => {
      if(res.data){
        that.addressData = res.data
      }
      that.calcFreightPrice()
    })

    if (that.orderReqeust.productList.length === 1 && that.orderReqeust.productList[0].groupShopId) {
      //若是团购商品，则携带上团购信息
      that.orderReqeust.groupShopId = that.orderReqeust.productList[0].groupShopId
    }
    this.calcTime()
  },
  methods: {
    // 选择支付方式
    changePayType(type) {
      this.payType = type
    },
    addressType: function(index) {
      this.shippingType = index
      this.calcFreightPrice()
    },
    //显示优惠券面板
    toggleMask(type) {
      let timer = type === 'show' ? 10 : 300;
      let state = type === 'show' ? 1 : 0;
      this.maskState = 2;
      setTimeout(() => {
        this.maskState = state;
      }, timer)
    },
    calcFreightPrice() {
      const that = this
      if (that.addressData) {
        that.orderReqeust.addressId = that.addressData.id
      }
      that.orderReqeust.storageId = that.$store.state.storageId
      if(that.shippingType === 1){
        that.$api.request('post', 'order/app/getFreightMoney', JSON.stringify(that.orderReqeust)
        ).then(res => {
          that.orderReqeust.freightPrice = res.data
        })
      }else {
        that.orderReqeust.freightPrice = 0
      }
    },
    numberChange(data) {
      this.number = data.number;
    },
    submit() {
      const that = this
      if (that.submiting) {
        return
      }
      if(this.shippingType === 1){
        if(!this.addressData.id){
          this.$api.msg('请选择配送地址')
          return
        }
      }else {
        if(!this.storageData){
          this.$api.msg('未有仓库地址信息')
          return
        }
        if(!this.orderReqeust.name){
          this.$api.msg('请填写您的联系姓名')
          return
        }

        if (!this.storageData.phone || this.storageData.phone.length != 11) {
          this.$api.msg('请正确填写您的联系方式')
          return
        }
      }
      if(this.orderReqeust.freightPrice < 0){
        this.$api.msg('无法配送！最低配送为'+ Math.abs(this.orderReqeust.freightPrice)+'元')
        return
      }
      uni.showLoading({})
      that.submiting = true
      if (that.addressData.id) {
        that.orderReqeust.addressId = that.addressData.id
      }
      that.orderReqeust.storageId = that.$store.state.storageId
      that.orderReqeust.shippingType = this.shippingType
      that.orderReqeust.channel = uni.getSystemInfoSync().platform
      that.orderReqeust.payType = that.payType
      if (that.payType === 'BALANCE') {
        that.$api.request('post', 'order/app/takeOrder',
            JSON.stringify(that.orderReqeust)
            , failres => {
              that.submiting = false
              that.$api.msg(failres.msg)
            }).then(res => {
              uni.redirectTo({
                url: '/pages/pay/success'
              })
        })
        return;
      }
      that.$api.request('post', 'order/app/takeOrder',
          JSON.stringify(that.orderReqeust)
          , failres => {
            that.submiting = false
            that.$api.msg(failres.msg)
          }).then(res => {
        //提交订单成功后，无需再让用户提交订单
        // that.submiting = false
        // uni.redirectTo({
        // 	url: '/pages/pay/pay?orderno=' + res.data + '&price=' + that.orderReqeust.totalPrice
        // })
        that.confirm(res.data,(that.orderReqeust.totalPrice - (that.orderReqeust.coupon?that.orderReqeust.coupon.couponPrice:0) + parseInt(that.orderReqeust.freightPrice)))
      })

    },
    selectCoupon(couponItem) {
      this.orderReqeust.couponId = couponItem.id
      this.orderReqeust.coupon = couponItem
      this.maskState = 0
      this.calcFreightPrice()
    },
    stopPrevent() {},
    //打开选择时间的弹窗
    selectTime(){
      this.$refs.popup.open()
    },
    //根据当前仓库营业时段及当前时间计算可供选择的送达时间
    calcTime(){
      var deliveryStart = this.$store.state.storageObj.deliveryStartTime.split(':')
      var deliveryStop = this.$store.state.storageObj.deliveryStopTime.split(':')
      var startHour = parseInt(deliveryStart[0])
      var startMin = parseInt(deliveryStart[1])
      var stopHour = parseInt(deliveryStop[0])
      var stopMin = parseInt(deliveryStop[1])
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth()+1>9?date.getMonth()+1:'0'+parseInt(date.getMonth()+1)
      var day = date.getDate()>9?date.getDate():'0'+date.getDate()
      var tomorrow = date.getDate()+1>9?date.getDate()+1:'0'+parseInt(date.getDate()+1)
      var afterTomo = date.getDate()+2>9?date.getDate()+2:'0'+parseInt(date.getDate()+2)

      this.dateObj.year = year
      this.dateObj.today = day
      this.dateObj.tomorrow = tomorrow
      this.dateObj.afterTomo = afterTomo
      this.dateObj.month = month

      this.dayList[0] = '今天'+month+'月'+day+'日'
      this.dayList[1] = '明天'+month+'月'+tomorrow+'日'
      this.dayList[2] = '后天'+month+'月'+afterTomo+'日'
      this.timeList[0] = ['尽快送达'],
          this.timeList[1] = []
      for (var i = 0; i < stopHour - startHour; i++) {
        var time = startHour+i>9?parseInt(startHour+i):'0'+parseInt(startHour+i)
        this.timeList[1].push([time+':00',time+':30'])
        this.timeList[1].push([time+':30',parseInt(parseInt(time)+1)+':00'])
      }
      if(startMin >= 30){//半点后配送，删除第一条记录
        this.timeList[1].splice(0,1)
      }
      //预计送达时间字符
      this.orderReqeust.predictTime = this.dayList[1]+this.timeList[1][0][0]+'-'+this.timeList[1][0][1]
      this.orderReqeust.predictDate = new Date(this.dateObj.year+'-'+this.dateObj.month+'-'+this.dateObj.tomorrow+' '+this.timeList[1][0][1]).getTime()
      this.timeList[2] = []
      for (var i = 0; i < stopHour - startHour; i++) {
        var time = startHour+i>9?parseInt(startHour+i):'0'+parseInt(startHour+i)
        this.timeList[2].push([time+':00',time+':30'])
        this.timeList[2].push([time+':30',parseInt(parseInt(time)+1)+':00'])
      }
      if(startMin >= 30){//半点后配送，删除第一条记录
        this.timeList[2].splice(0,1)
      }
      var now = date.getHours()
      if(now < startHour){
        now = startHour
      }
      var nowTime = date.getMinutes()
      this.nowTime = nowTime
      this.now = now
      if(now >= stopHour){
        this.dayList.splice(0,1)
        this.timeList.splice(0,1)
      }else{
        this.timeList[0] = ['尽快送达']
        for (var i = 0; i < stopHour - now; i++) {
          var time = now+i>9?now+i:'0'+parseInt(now+i)
          this.timeList[0].push([time+':00',time+':30'])
          this.timeList[0].push([time+':30',parseInt(now+i+1)+':00'])
        }
        if(nowTime > 30){
          this.timeList[0].splice(1,2)
          var timeMine = nowTime - 30 > 9 ?parseInt(nowTime - 30):'0'+parseInt(nowTime - 30)
          this.orderReqeust.predictTime = '尽快送达（预计'+parseInt(now+1)+':'+ timeMine+'送达)'
          this.orderReqeust.predictDate = new Date(this.dateObj.year+'-'+this.dateObj.month+'-'+this.dateObj.today+' '+parseInt(now+1)+':'+ timeMine).getTime()
        }else if(nowTime < 29){
          this.orderReqeust.predictTime = '尽快送达（预计'+now+':'+ parseInt(nowTime+30)+'送达)'
          this.orderReqeust.predictDate = new Date(this.dateObj.year+'-'+this.dateObj.month+'-'+this.dateObj.today+' '+now+':'+ parseInt(nowTime+30)).getTime()
        }else if(nowTime == 30){
          this.timeList[0].splice(1,1)
          this.orderReqeust.predictTime = '尽快送达（预计'+parseInt(now+1)+':00送达)'
          this.orderReqeust.predictDate = new Date(this.dateObj.year+'-'+this.dateObj.month+'-'+this.dateObj.today+' '+parseInt(now+1)+':00').getTime()
        }
      }
    },
    chooseDay(index){
      this.dayIndex = index
    },
    chooseTime(index){
      this.timeIndex = index
    },
    checkTime(){
      //当天尽快送达
      if(this.dayIndex == 0 && this.timeIndex == 0 && this.dayList.length >= 3){
        if(this.nowTime > 30){
          var timeMine = this.nowTime - 30 > 9 ?parseInt(this.nowTime - 30):'0'+parseInt(this.nowTime - 30)
          this.orderReqeust.predictTime = '尽快送达（预计'+parseInt(this.now+1)+':'+ timeMine+'送达)'
          this.orderReqeust.predictDate = new Date(this.dateObj.year+'-'+this.dateObj.month+'-'+this.dateObj.today+' '+parseInt(this.now+1)+':'+ timeMine).getTime()
        }else if(this.nowTime < 29){
          this.orderReqeust.predictTime = '尽快送达（预计'+this.now+':'+ parseInt(this.nowTime+30)+'送达)'
          this.orderReqeust.predictDate = new Date(this.dateObj.year+'-'+this.dateObj.month+'-'+this.dateObj.today+' '+this.now+':'+ parseInt(this.nowTime+30)).getTime()
        }else if(this.nowTime == 30){
          this.orderReqeust.predictTime = '尽快送达（预计'+parseInt(this.now+1)+':00送达)'
          this.orderReqeust.predictDate = new Date(this.dateObj.year+'-'+this.dateObj.month+'-'+this.dateObj.today+' '+parseInt(this.now+1)+':00').getTime()
        }
        this.$refs.popup.close()
        console.log(this.orderReqeust)
        return
      }
      //当天送达
      if(this.dayIndex == 0 && this.dayList.length >= 3){
        this.orderReqeust.predictTime = this.timeList[0][this.timeIndex][0]+'-'+this.timeList[0][this.timeIndex][1]
        console.log(this.dateObj.year+'-'+this.dateObj.month+'-'+this.dateObj.today+' '+this.timeList[this.dayIndex][this.timeIndex][1])
        this.orderReqeust.predictDate = new Date(this.dateObj.year+'-'+this.dateObj.month+'-'+this.dateObj.today+' '+this.timeList[this.dayIndex][this.timeIndex][1]).getTime()
        this.$refs.popup.close()
        console.log(this.orderReqeust)
        return
      }
      //明、后天送达
      this.orderReqeust.predictTime = this.dayList[this.dayIndex]+this.timeList[this.dayIndex][this.timeIndex][0]+'-'+this.timeList[this.dayIndex][this.timeIndex][1]
      if(this.dayList.length >= 3){
        if(this.dayIndex == 1){//明天
          this.orderReqeust.predictDate = new Date(this.dateObj.year+'-'+this.dateObj.month+'-'+this.dateObj.tomorrow+' '+this.timeList[this.dayIndex][this.timeIndex][1]).getTime()
        }else if(this.dayIndex == 2){//后天
          this.orderReqeust.predictDate = new Date(this.dateObj.year+'-'+this.dateObj.month+'-'+this.dateObj.afterTomo+' '+this.timeList[this.dayIndex][this.timeIndex][1]).getTime()
        }
      }else if(this.dayList.length >= 2){
        if(this.dayIndex == 0){//明天
          this.orderReqeust.predictDate = new Date(this.dateObj.year+'-'+this.dateObj.month+'-'+this.dateObj.tomorrow+' '+this.timeList[this.dayIndex][this.timeIndex][1]).getTime()
        }else if(this.dayIndex == 1){//后天
          this.orderReqeust.predictDate = new Date(this.dateObj.year+'-'+this.dateObj.month+'-'+this.dateObj.afterTomo+' '+this.timeList[this.dayIndex][this.timeIndex][1]).getTime()
        }
      }
      this.$refs.popup.close()
      console.log(this.orderReqeust)
    },
    //确认支付
    confirm(orderNo,totalPrice) {
      // ============微信支付代码 prod 开始============
      // // #ifdef APP-PLUS
      // this.$api.msg('演示环境不支持支付')
      // return
      // // #endif
      // const that = this
      // that.$api.request('get', 'order/app/wxPrepay', {
      // 	orderId : orderNo
      // }, failres => {
      // 	that.submiting = false
      // 	that.$api.msg(failres.msg)
      // }).then(prepayRes => {
      // 	uni.hideLoading()
      // 	that.submiting = false
      // 	//#ifdef MP-WEIXIN
      // 	const payParam = {
      // 		appId: prepayRes.data.appId,
      // 		nonceStr: prepayRes.data.nonceStr,
      // 		package: prepayRes.data.packageValue,
      // 		timeStamp: prepayRes.data.timeStamp,
      // 		signType: prepayRes.data.signType,
      // 		paySign: prepayRes.data.paySign,
      // 	}
      // 	//#endif
      // 	//#ifdef APP-PLUS
      // 	const payParam = {
      // 		appid: prepayRes.data.appId,
      // 		noncestr: prepayRes.data.nonceStr,
      // 		package: prepayRes.data.packageValue,
      // 		partnerid: prepayRes.data.partnerId,
      // 		prepayid: prepayRes.data.prepayId,
      // 		timestamp: parseInt(prepayRes.data.timeStamp),
      // 		sign: prepayRes.data.sign,
      // 		signType: 'MD5'
      // 	}
      // 	//#endif
      // 	//#ifdef MP-WEIXIN || APP-PLUS
      // 	uni.requestPayment({
      // 		provider: 'wxpay',
      // 		//#ifdef MP-WEIXIN
      // 		...payParam,
      // 		//#endif
      // 		//#ifdef APP-PLUS
      // 		orderInfo: payParam,
      // 		//#endif
      // 		success: function(res) {
      // 			uni.redirectTo({
      // 				url: '/pages/pay/success'
      // 			})
      // 		},
      // 		fail: function(res) {
      // 			// console.log("支付过程失败");
      // 			// that.$api.msg(JSON.stringify(res))
      // 		},
      // 		complete: function(res) {
      // 			console.log("支付过程结束")
      // 		}
      // 	});
      // 	//#endif
      // 	//#ifdef H5
      // that.$jweixin.chooseWXPay({
      // 	nonceStr: prepayRes.data.nonceStr,
      // 	timestamp: prepayRes.data.timeStamp,
      // 	package: prepayRes.data.packageValue,
      // 	signType: prepayRes.data.signType,
      // 	paySign: prepayRes.data.paySign,
      // 	success: (e) => {
      // 		//支付成功
      // 		uni.redirectTo({
      // 			url: '/pages/pay/success'
      // 		})
      // 	},
      // 	fail: function(res) {
      // 		console.log("支付过程失败");
      // 		that.$api.msg(JSON.stringify(res))
      // 	},
      // 	complete: function(res) {
      // 		console.log("支付过程结束")
      // 	}
      // })
      // 	//#endif
      // })
      //============微信支付代码 prod 结束============
      //============微信支付代码 dev 开始============
      uni.request({
        url: this.$api.defConfig().baseUrl + '/cb/wxpay',
        data: {
          outTradeNo: orderNo,
          transactionId:'test',
          totalFee:totalPrice
        },
        method: 'POST',
        header: {
          'Content-Type': 'application/json; charset=UTF-8'
        },
        success: (res) => {
          //代码回调-上线后注释代码-结束
          uni.redirectTo({
            url: '/pages/pay/success'
          })
        }
      });
      //============微信支付代码 dev 结束============

    }
  }
}
</script>

<style  lang="scss">
page {
  background: #F4F4F4;
  padding-bottom: 100upx;
}
.mask {
  display: flex;
  align-items: flex-end;
  position: fixed;
  left: 0;
  top: var(--window-top);
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 9995;
  transition: .3s;

  .mask-content {
    width: 100%;
    min-height: 30vh;
    max-height: 70vh;
    background: #f3f3f3;
    transform: translateY(100%);
    transition: .3s;
    overflow-y: scroll;
  }

  &.none {
    display: none;
  }

  &.show {
    background: rgba(0, 0, 0, .4);
    .mask-content {
      transform: translateY(0);
    }
  }
}
/* 优惠券列表 */
.coupon-item {
  display: flex;
  flex-direction: column;
  margin: 20upx 24upx;
  background: #fff;

  .con {
    display: flex;
    align-items: center;
    position: relative;
    height: 120upx;
    padding: 0 30upx;

    &:after {
      position: absolute;
      left: 0;
      bottom: 0;
      content: '';
      width: 100%;
      height: 0;
      border-bottom: 1px dashed #f3f3f3;
      transform: scaleY(50%);
    }
  }

  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    overflow: hidden;
    height: 100upx;
  }

  .title {
    font-size: 32upx;
    color: $font-color-dark;
    margin-bottom: 10upx;
  }

  .time {
    font-size: 24upx;
    color: $font-color-light;
  }

  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 26upx;
    color: $font-color-base;
    height: 100upx;
  }

  .price {
    font-size: 44upx;
    color: $base-color;

    &:before {
      content: '￥';
      font-size: 34upx;
    }
  }

  .tips {
    font-size: 24upx;
    color: $font-color-light;
    line-height: 60upx;
    padding-left: 30upx;
  }

  .circle {
    position: absolute;
    left: -6upx;
    bottom: -10upx;
    z-index: 10;
    width: 20upx;
    height: 20upx;
    background: #f3f3f3;
    border-radius: 100px;

    &.r {
      left: auto;
      right: -6upx;
    }
  }
}

.address {
  padding: 36upx 30upx;
  background-color: #FFFFFF;
  overflow: hidden;
}

.address-head {
  color: #999999;
  font-size: 28upx;
  font-weight: 400;
}

.address-main {
  margin-top: 24upx;
}

.address-left {
  margin: 9upx 0;
  width: 24upx;
  height: 32upx;
  float: left;
}

.address-text {
  margin-left: 14upx;
  float: left;
  font-size: 36upx;
  color: #333333;
  font-weight: 500;
}

.address-right {
  margin: 11upx 20upx 11upx 0;
  width: 28upx;
  height: 28upx;
  float: right;
}

.address-distance {
  clear: both;
  margin-top: 10upx;
  color: #333333;
  font-size: 30upx;
}

.a-bg {
  display: block;
  width: 100%;
  height: 5upx;
}

.goods {
  margin-top: 20upx;
  background-color: #FFFFFF;
  overflow: hidden;
}

.goods-head {
  margin: 0 30upx;
  height: 100upx;
  padding: 30upx 0;
  border-bottom: 2upx solid #F1F1F1;
}

.goods-head-text {
  width: 294upx;
  float: left;
  color: #333333;
  font-size: 28upx;
}

.goods-head-time {
  width: 490upx;
  float: left;
  color: #2AAC34;
  font-size: 28upx;
}

.goods-head-right {
  margin-top: 8upx;
  width: 16upx;
  height: 24upx;
  float: left;
}

.goods-one {
  padding: 40upx 0 30upx 0;
  margin: 0 30upx;
  height: 190upx;
}
.scroll_box{
  width: 544upx;
  height: 110upx;
  float: left;
  overflow:hidden;
}
.scroll_box scroll-view{
  height: 110upx;
  width: 544upx;
  white-space: nowrap;
}
.goods-img {
  margin-top: 2upx;
  width: 118upx;
  height: 110upx;
  float: left;
}
.goods-more-img{
  margin-top: 2upx;
  width: 118upx;
  height: 110upx;
  display: inline-block;
  margin-right: 36upx;
}
.goods-more-number{
  width: 126upx;
  height: 110upx;
  line-height: 110upx;
  text-align: center;
  color: #1B1C33;
  font-size: 28upx;
  float: left;
}
.goods-more-right{
  margin-top: 43.5upx;
  width: 15upx;
  height: 23upx;
  float: left;
}
.goods-text {
  margin-top: 6upx;
  margin-left: 32upx;
  width: 538upx;
  height: 110upx;
  float: left;
}

.goods-name {
  width: 500upx;
  line-height: 44upx;
  overflow: hidden;
  color: #333333;
  font-size: 32upx;
}

.goods-tag {
  margin-top: 10upx;
}

.goods-price {
  float: left;
  color: #333333;
  font-size: 32upx;
  line-height: 44upx;
}

.goods-yprice {
  margin-left: 16upx;
  float: left;
  color: #AEAEAE;
  font-size: 24upx;
  line-height: 44upx;
  text-decoration: line-through;
}

.goods-number {
  float: right;
  color: #333333;
  font-size: 32upx;
}

.distribution {
  padding: 0 30upx;
  margin-top: 20upx;
  background-color: #FFFFFF;
  overflow: hidden;
}

.distribution-list {
  height: 100upx;
  line-height: 100upx;
  font-size: 28upx;
  clear: both;

}

.distribution-list-bottom {
  border-bottom: 2upx solid #F1F1F1;
}

.distribution-text {
  width: 200upx;
  float: left;
  color: #333333;
}

.distribution-price {
  width: 490upx;
  float: left;
  text-align: right;
  color: #666666;
}

.distribution-price input {
  width: 490upx;
  height: 100upx;
  line-height: 100upx;
  overflow: hidden;
  text-align: right;
}

.pay-text {
  color: #333333;
  font-size: 32upx;
}

.distribution-price image {
  width: 40upx;
  height: 40upx;
  float: right;
  margin-top: 30upx;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  height: 98upx;
  width: 100%;
  background-color: #FFFFFF;
}
.priceClass{
  margin-left: 62upx;
  width: 448upx;
  float: left;
}
.price-content{
  height: 50upx;
  line-height: 50upx;
  margin-top: 10upx;
  color: #666666;
  font-size: 26upx;
}
.price-content-money{
  color: #2AAC34;
  font-size: 36upx;
}
.price-preferential{
  height: 36upx;
  line-height: 36upx;
  color: #AEAEAE;
  font-size: 20upx;
}
.submit{
  width: 240upx;
  float: left;
  line-height: 98upx;
  color: #FFFFFF;
  background-color: #2AAC34;
  text-align: center;
}
.order-submission .wrapper .shipping select {
  color: #999;
  padding-right: 0.15 * 100rpx;
}

.order-submission .wrapper .shipping .iconfont {
  font-size: 0.3 * 100rpx;
  color: #515151;
}

.order-submission .allAddress {
  width: 100%;
  background-image: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 100%);
  background-image: -webkit-linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 100%);
  background-image: -moz-linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 100%);
  padding-top: 1 * 100rpx;
}

.order-submission .allAddress .nav {
  margin: 0 auto;
  padding: 0 30rpx;
  width: 100%;
  box-sizing: border-box;
}

.order-submission .allAddress .nav .item {
  flex: 1;
  position: relative;
}

.order-submission .allAddress .nav .item.on {
  position: relative;
}

.order-submission .allAddress .nav .item.on:before {
  position: absolute;
  bottom: 0;
  content: '骑手配送';
  font-size: 0.28 * 100rpx;
  display: block;
  height: 0;
  left: 0;
  right: 0;
  border-width: 0.4 * 100rpx;
  border-style: solid;
  border-color: #fff;
  z-index: 9;
  text-align: center;
  line-height: 0.14 * 100rpx;
}

.order-submission .allAddress .nav .item:nth-of-type(2).on:before {
  content: '到店自提';
  border-width: 0.4 * 100rpx;
}

.order-submission .allAddress .nav .item.on2 {
  position: relative;
}

.order-submission .allAddress .nav .item.on2:before {
  position: absolute;
  bottom: 0;
  content: '到店自提';
  font-size: 0.28 * 100rpx;
  display: block;
  height: 0;
  left: 0;
  right: 0;
  border-width: 0.4 * 100rpx;
  border-style: solid;
  border-color: #d5e6e6;
  text-align: center;
  line-height: 0.14 * 100rpx;
}

.order-submission .allAddress .nav .item:nth-of-type(1).on2:before {
  content: '骑手配送';
  border-width: 0.4 * 100rpx;
}

.order-submission .allAddress .address {
  width: 6.91 * 100rpx;
  height: 1.5 * 100rpx;
  margin: 0 auto;
  box-sizing: border-box;
}

.order-submission .allAddress .line {
  width: 7.1 * 100rpx;
  margin: 0 auto;
}

.order-submission .wrapper .item .discount input::placeholder {
  color: #ccc;
}
</style>
